<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<%@ include file="../lib/vue/vue_common.jsp"%>
		<title>贝通商城</title>
		<link rel="stylesheet" href="${ctx}/page/common/css/swiper3.1.0.min.css?v=${version}">
		<link rel="stylesheet" href="${ctx}/page/index/css/index.css?v=${version}">
		<script src="${ctx}/page/common/js/swiper.min.js"></script>
	</head>

	<body class="withHeader withFooter">
		<div id="app" v-cloak>
			<my-header></my-header>
			<div class="wrap">
				<div class="swiper-container" id="slider">
					<ul class="swiper-wrapper">
						<li class="swiper-slide" v-for="item in banners"  @click="openLink(item.url)">
							<div class="pic"><img class="lazy" :src="item.imageUrl" :alt="item.name" /></div>
						</li>
					</ul>
				</div>
			</div>
			<div class="wrap">
				<div class="menu-top">
					<li v-for="item in menu" @click="openLink(item.url)">
						<div class="pic"><img :src="item.imageUrl" /></div>
						<div class="name" v-text="item.name"></div>
					</li>
				</div>
			</div>
			<div class="wrap">
				<div class="broadcast">
					<div class="icon"></div>
					<marquee direction="left" scrollamount="2">
						<p v-for="item in broadcast" @click="openLink(item.url)">{{item.name}}</p>
					</marquee>
				</div>
			</div>
			<div class="wrap">
				<div class="activity">
					<ul class="activity2">
						<li v-for="item in activity" @click="openLink(item.url)">
							<div class="img">
								<img :src="item.imageUrl" />
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="wrap">
				<div class="content">
					<div class="title">-为您推荐-</div>
					<ul>
						<li v-for="item in product" @click="openLink(item.detailUrl)">
							<div class="img"><img v-lazy.container="item.imgUrl" /></div>
							<div class="name one_line"><i>秒</i>{{item.name}}</div>
							<div class="sub_name one_line"></div>
							<div class="price">{{item.highVipPrice|fixed2}}&nbsp;贝币</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="menu-foot">
				<ul>
					<li class="index s">
						<span>首页</span>
					</li>
					<li class="charge"  @click="openLink('http://mp.weixin.qq.com/s/Gkl3eoDu069HEHGWSj20uA')">
						<span>贝币</span>
					</li>
					<li class="pay" @click="openLink('http://weixin.firstapp.me/weixin/page/softBuyPage.htm')">
						<span>服务</span>
					</li>
					<li class="cart" @click="openLink('http://mp.weixin.qq.com/s/EWJk2o0tqyus5ZqmJteXlg')">
						<span>攻略</span>
					</li>
					<li class="member" @click="openLink('http://weixin.firstapp.me/weixin/page/memberCenterPage.htm')">
						<span>我的</span>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '${ctx}/page/lib/vue/img/1-1.png',
				loading: '${ctx}/page/lib/vue/img/1-1.png',
				attempt: 1
			})
			var app = new Vue({
				el: '#app',
				data: {
					banners: ${ATTR1},
					menu: ${ATTR2},
					product: ${ATTR3},
					broadcast: ${ATTR4},
					activity: ${ATTR5},
					keyword: null,
					mySwiper: null
				},
				mounted: function() {
					this.mySwiper = new Swiper('#slider', {
						autoplay: 5000,
						visibilityFullFit: true,
						loop: true,
						pagination: '.pagination',
						preventClicks: true,
					});
				},
				methods: {
					openLink:function(link){
						if(link){
							window.location.href=link;
						}else{
							alert("开发中，敬请期待！");
						}
					},
				}
			});
			window.onload = function(){
				resetHeight();
			}
			window.onresize = function() {
				var res;
				if (res){
					clearTimeout(res);
				}
				res = setTimeout(function(){
					resetHeight();
				},20);
		    };
		    function resetHeight(){
				//var li1Height = document.getElementById("li1").offsetHeight ;
				//var li2Height = document.getElementById("li2").offsetHeight  ;
				//document.getElementById("img0").style.height=li1Height+li2Height+"px";
		    }
		</script>

	</body>

</html>